<template>
    <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners">
        <slot></slot>
    </el-select>
</template>

<script>
	import Sortable from "/vue/libs/Sortable.min.js";  
    module.exports = {
        name: 'DragSelect',
        props: {
            value: {
                type: Array,
                required: true
            }
        },
        computed: {
            selectVal: {
                get() {
                    return [...this.value]
                },
                set(val) {
                    this.$emit('input', [...val])
                }
            }
        },        
        mounted() {
			this.setSort();       
        },
        methods: {
            setSort() {
                const el = this.$refs.dragSelect.$el.querySelectorAll('.el-select__tags > span')[0]
                this.sortable = Sortable.create(el, {
                    ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
                    setData: function (dataTransfer) {
                        dataTransfer.setData('Text', '')
                        // to avoid Firefox bug
                        // Detail see : https://github.com/RubaXa/Sortable/issues/1012
                    },
                    onEnd: evt => {
                        const targetRow = this.value.splice(evt.oldIndex, 1)[0]
                        this.value.splice(evt.newIndex, 0, targetRow)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .drag-select .sortable-ghost {
        opacity: .8;
        color: #fff !important;
        background: #42b983 !important;
    }

    .drag-select .el-tag {
        cursor: pointer;
    }
</style>
